<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		
		<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/fonts/fonts.css">
		<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/reset/reset.css">

		<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
		<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/dragdrop/dragdrop-min.js" ></script>
		<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/connection/connection-min.js" ></script>

		<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/container/container-min.js"></script>
		<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/container/assets/container.css">

		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/tabview/assets/tabview.css">
		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/tabview/assets/border_tabs.css">
		<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/element/element-beta-min.js"></script>
		<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/tabview/tabview-min.js"></script>
		
		<style>
			body { background:#eee }
			label { display:block;float:left;width:45%;clear:left; }
			.clear { clear:both; }
			#resp { font-family:courier;margin:10px;padding:5px;border:1px solid #ccc;background:#fff;}
		</style>

		<script>
				YAHOO.namespace("example.container");
				
				function init() {
										
    				YAHOO.example.container.welcome = new YAHOO.widget.Dialog("elHomeView", {visible:false, constraintoviewport : true});
					YAHOO.example.container.welcome.render();					
															
					// Define various event handlers for Dialog
					var handleSubmit = function() {
						this.submit();
					};
					var handleCancel = function() {
						this.cancel();
					};
					var handleSuccess = function(o) {
						var response = o.responseText;
						response = response.split("<!")[0];
						document.getElementById("resp").innerHTML = response;
						eval(response);
					};
					var handleFailure = function(o) {
						alert("Submission failed: " + o.status);
					};

				    var config = {visible:false, 
						constraintoviewport : true,
					   	buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
								  { text:"Cancel", handler:handleCancel } ]
						 };


					// Instantiate the Dialog
					YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1",config);

					YAHOO.example.container.dialog1.validate = function() {
						var data = this.getData();
						if (data.firstname == "" || data.lastname == "") {
							alert("Please enter your first and last names.");
							return false;
						} else {
							return true;
						}
					};

					// Wire up the success and failure handlers
					YAHOO.example.container.dialog1.callback = { success: handleSuccess,
																 failure: handleFailure };
					
					// Render the Dialog
					YAHOO.example.container.dialog1.render();

					YAHOO.example.container.dialog2 = new YAHOO.widget.Dialog("dialog2", config);
					
					// Validate the entries in the form to require that both first and last name are entered
					YAHOO.example.container.dialog2.validate = function() {
						var data = this.getData();
						if (data.firstname == "" || data.lastname == "") {
							alert("Please enter your first and last names.");
							return false;
						} else {
							return true;
						}
					};

					// Wire up the success and failure handlers
					YAHOO.example.container.dialog2.callback = { success: handleSuccess,
																 failure: handleFailure };
					
					// Render the Dialog
					YAHOO.example.container.dialog2.render();
					
					YAHOO.example.container.manager = new YAHOO.widget.OverlayManager();
					YAHOO.example.container.manager.register([YAHOO.example.container.panel1,
					  YAHOO.example.container.dialog1,
					  YAHOO.example.container.dialog2]);
					
					YAHOO.example.container.handleTabChange = function(nIndex) {
						var sTitle;
						YAHOO.example.container.manager.hideAll();
						switch(nIndex) {
							case 0: 
								sTitle = "Welcome";
					            YAHOO.example.container.welcome.show();
								break;
							case 1: 
								sTitle = "Dialog 1";
					            YAHOO.example.container.dialog1.show();
								break;
							case 2:
								sTitle = "Dialog 2";
					            YAHOO.example.container.dialog2.show();
								break;
							default:
								sTitle = "";
								break;
						};
						document.title = sTitle; 
					}
					
				 	YAHOO.example.container.menuBar = new YAHOO.widget.TabView("menuBar");
					YAHOO.example.container.menuBar.on("contentReady",function() {						
					    var onActiveTabChange = function(e) {
    	    				var nIndex = YAHOO.example.container.menuBar.get('activeIndex');
							YAHOO.example.container.handleTabChange(nIndex);
						}	
						YAHOO.example.container.menuBar.on('activeTabChange', onActiveTabChange);     						
					});
				}				

				YAHOO.util.Event.addListener(window, "load", init);
		</script>

	</head>
	<body>
		<div id="menuBar" class="yui-navset">
			<ul class="yui-nav">
                <li class="selected"><a href="#Home"><em>Home</em></a></li>			
				<li>
					<a href="#1"><em>Show Dialog 1</em></a> 
				</li>
				<li>
					<a href="#2"><em>Show Dialog 2</em></a> 
				</li>			
			</ul>
		</div>
		
		<div id="elContent">
		
		                <div id="elHomeView">
	    		    <div class="bd">                
                        <p>Welcome to the application!</p>            
                    </div>
                </div>

		
		<div id="dialog1">

			<div class="hd">Please enter your information for Dialog 1</div>
			<div class="bd">
				<form method="POST" action="../assets/post.php">
					<label for="firstname">First Name:</label><input type="textbox" name="firstname" /> <br />
					<label for="lastname">Last Name:</label><input type="textbox" name="lastname" /> <br />
					<label for="email">E-mail:</label><input type="textbox" name="email" />  <br />

					<label for="state[]">State:</label> 

					<select multiple name="state[]">
						<option value="California">California</option>
						<option value="New Jersey">New Jersey</option>
						<option value="New York">New York</option>
					</select>  <br />

						<div class="clear"></div>

					<label for="radiobuttons">Radio buttons:</label>

					<input type="radio" name="radiobuttons[]" value="1" checked/> 1
					<input type="radio" name="radiobuttons[]" value="2" /> 2
					
						<div class="clear"></div>

					<label for="check">Single checkbox:</label><input type="checkbox" name="check" value="1" /> 1
					
						<div class="clear"></div>
						
					<label for="textarea">Text area:</label><textarea name="textarea"></textarea>

						<div class="clear"></div>

					<label for="cbarray">Multi checkbox:</label>
					<input type="checkbox" name="cbarray[]" value="1" /> 1
					<input type="checkbox" name="cbarray[]" value="2" /> 2
				</form>
				<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat. 
				</p>				
			</div>
		</div>
			
		<div id="dialog2">

			<div class="bd">
				<form method="POST" action="../assets/post.php">
					<label for="firstname">First Name:</label><input type="textbox" name="firstname" /> <br />
					<label for="lastname">Last Name:</label><input type="textbox" name="lastname" /> <br />
					<label for="email">E-mail:</label><input type="textbox" name="email" />  <br />

					<label for="state[]">State:</label>

					<select multiple name="state[]">
						<option value="California">California</option>
						<option value="New Jersey">New Jersey</option>
						<option value="New York">New York</option>
					</select> 

						<div class="clear"></div>

					<label for="radiobuttons">Radio buttons:</label>

					<input type="radio" name="radiobuttons[]" value="1" checked/> 1
					<input type="radio" name="radiobuttons[]" value="2" /> 2
					
						<div class="clear"></div>

					<label for="check">Single checkbox:</label><input type="checkbox" name="check" value="1" /> 1
					
						<div class="clear"></div>
						
					<label for="textarea">Text area:</label><textarea name="textarea"></textarea>

						<div class="clear"></div>

					<label for="cbarray">Multi checkbox:</label>
					<input type="checkbox" name="cbarray[]" value="1" /> 1
					<input type="checkbox" name="cbarray[]" value="2" /> 2
				</form>
			</div>			
		</div>

		<div id="resp">
			<p>
			Server response will be displayed in this area
			</p>
			<p>
			(Submission will fail at this time since we don't have the server-side file setup yet.)
			</p>
			</div>
		</div>
	</body>
</html>
